<template>
  <div>
    <van-nav-bar left-text="购物车" @click-left="$router.go(-1)" left-arrow @click-right="onClickRight">
      <template #right>
        <van-icon name="ellipsis" size="25" />
      </template>
    </van-nav-bar>
    <div class="manager" ref="control">
      <van-button type="default">管理</van-button>
    </div>
    <div class="wraper" v-for="(item, index) in cart" :key="index">
      <van-checkbox v-model="item.singlestate" @click="shopchecked(item.singlestate, index)">
        <van-icon name="medal" class="shopicon" />{{ item.shopstore }}
      </van-checkbox>
      <div v-for="(item1, index1) in item.shoplist" :key="index1" class="prowraper">
        <van-checkbox v-model="item1.state" @click="onechecked" icon-size="14px" class="probutton"></van-checkbox>
        <van-card :key="index1" :num="item1.num" :tag="item1.categoryname" :price="item1.price" :title="item1.shop"
          :thumb="item1.picture" :origin-price="item1.oldprice">
          <template #footer>
            <van-button size="mini" @click="item1.num--" :disabled="item1.num<1">-</van-button>
            <van-button size="mini" @click="item1.num++">+</van-button>
          </template>
        </van-card>
      </div>
      <van-submit-bar :price="totalprice * 100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="stateAll" @click="statell1()">全选</van-checkbox>
      </van-submit-bar>
    </div>


  <!-- <TabBar></TabBar> -->

  </div>

</template>

<script>
import TabBar from '@/components/Mine/TabBar'
import { mapGetters, mapActions } from "vuex";
export default {
    components:{
      TabBar
    },
    data() {
        return {
            stateAll: "",
            prolist: [],
            // cart:[],
        };
    },
    computed: {
        // 获取store的购物车数据
        // ...mapGetters(["cart"]),
        cart:{
          get(){
            return this.$store.getters.cart
          },
          set(){

          }
        },
        
        totalprice() {
            return this.prolist.reduce((s, current) => s + (current.state ? (current.num * current.price) : 0), 0);
        }
    },
    created() {
        this.cart = this.$store.getters.cart;
        this.stateAll = this.$store.getters.stateAll;
        this.fortotal();
    },
    methods: {
        // 店铺选中
        fortotal() {
            for (let a = 0; a < this.cart.length; a++) {
                for (let i = 0; i < this.cart[a].shoplist.length; i++) {
                    this.prolist.push(this.cart[a].shoplist[i]);
                }
            }
        },
        // 确认订单
        onSubmit() { 
          this.$router.push('/makesure')
        },
        // 右侧管理
        onClickRight() {
            console.log(this.$refs.control);
            this.$refs.control.style.display = "block";
        },
        statell1() {
            this.prolist.forEach(item => item.state = this.stateAll);
            this.cart.map(item => item.singlestate = this.stateAll);
        },
        shopchecked(check, index) {
            this.cart[index].shoplist.map(item => item.state = check);
            let checked = this.cart.every(item => item.singlestate);
            this.stateAll = checked;
        },
        onechecked() {
            for (let i = 0; i < this.cart.length; i++) {
                let checked = this.cart[i].shoplist.every(item => item.state);
                this.cart[i].singlestate = checked;
            }
            let isok = this.prolist.every(item => item.state);
            this.stateAll = isok;
        }
    },
    components: { TabBar }
};
</script>
<style scoped>
.wraper {
  padding: 10px;
}

.prowraper {
  position: relative;
}

.probutton {
  position: absolute;
  top: 35px;
  left: 3px;
  z-index: 99;
}

.shopicon {
  color: rgb(191, 213, 155);
}

.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.manager {
  float: right;
  display: none;
}
</style>
